<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="70%" :show-close='false' class="addQcPlanDialog" :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">
        
		  	选择质控计划
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<div class="heighHalf" style = "height:100%;">
			<el-table :data="qcPlanList" style="width: 100%" size="mini" height="100%" @selection-change="handleSelectionChange" ref="multipleTable">
				<el-table-column fixed type="selection" width="38px">
				</el-table-column>
				<el-table-column label="序号" min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="name" label="名称" min-width="100px">
				</el-table-column>
				<el-table-column property="typeName" label="类型" min-width="100px">
				</el-table-column>
				<el-table-column property="isDo" label="是否必做" min-width="100px">
					<template slot-scope="scope">
						 <el-checkbox v-model="scope.row.isDo" ></el-checkbox>
						<!--<el-select v-model="scope.row.isDo" size="mini">
							<el-option v-for="item in yesorno" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>-->
					</template>
				</el-table-column>
			</el-table>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" size="mini" @click="subEquip">确 定</el-button>
			<el-button  size="mini" @click="close">取 消</el-button>
		</span>

	</el-dialog>

</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				qcPlanList: [], //qc计划列表
				multipleSelection: [], //选中的主仪器

			}
		},
		props: ['addVisible', 'newOrEditQcPlan','detectAbiltyId'],
		components: {

		},

		computed: {
			...mapState(['mainEquipType', 'typeQcSelect', 'yesorno']),
		},
		mounted() {

		},
		watch: {
			addVisible(val, oldVal) {
				if(val) {
					this.getQcList();
				}
			}
		},
		methods: {
			// 获取主辅仪器列表
			getQcList() {
				this.$http({
					method: 'post',
					apiUrl: '/technology/readQcPlanList.htm',
					params:{
						id:this.detectAbiltyId
					},
					isJson:false
				}).then(res => {
					if(res.code === 0) {
						this.qcPlanList = res.data;
						// res.data.forEach(function(item){
						// 	item.isDo = false;
						// })
						for(var i in res.data) {
							this.$set(res.data[i], 'isDo', false)
						}

					}

				})
			},
			// 选择主仪器  只可单选
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			// 保存选中的主辅仪器
			subEquip() {
				if(this.multipleSelection.length == 0) {
					this.$notify({
						title:"警告",
						type:"warning",
						message:"请先选择质控计划!"
					})
				}else{
					var url = '/technology/addQcDetec.htm';
					var arr = [];
					for(var i in this.multipleSelection) {
						var obj = {};
						obj.detectability = this.detectAbiltyId;
						obj.qc = this.multipleSelection[i].id;
						obj.qcName = this.multipleSelection[i].name;
						obj.qcCode = this.multipleSelection[i].code;
						obj.isDo = this.multipleSelection[i].isDo;
						obj.typeName = this.multipleSelection[i].typeName;
						arr.push(obj)
					}
					// this.$parent.qcDetecList = this.util.repeatData({ old: this.$parent.qcDetecList, new: arr, unique: 'qc' })
					// this.close();
					this.$http({
						method: 'post',
						apiUrl: url,
						params: arr,
						isJson: true,
					}).then(res => {
						if(res.code === 0) {
							this.$message({
								type: 'success',
								message: '提交成功'
							});
							this.close();
							this.$parent.getQcPlan();
							// this.$emit('getqcplan')
						}

					})
				}

			},
			// 清除选中
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},

			//关闭
			close(formName) {
				this.$emit('update:addVisible', false);
				this.toggleSelection()
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.addQcPlanDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80% !important;
	}
	
	.addQcPlanDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}
	
	.addQcPlanDialog .heighHalf {
		height: 100%
	}
	
	.addQcPlanDialog .heighHalf .height40 {
		height: 40px;
		line-height: 40px;
	}
</style>